<template>
  <div id="app">
    <el-form ref="form" label-width="100px">
      <el-form-item label="树形选择">
        <TreeSelect />
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="字符串生成">
        <StrGen />
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="列表转树">
        <el-button size="mini" type="primary" @click="transList">转换</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="树转列表">
        <el-button size="mini" type="primary" @click="transTree">转换</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="格式化时间">
        <FormatTime />
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="访问文件夹">
        <OpenDir />
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="右键菜单">
        <el-button size="mini" type="primary" @click="openContextMenuDia = true">点击查看</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="基于事件右键菜单">
        <el-button size="mini" type="primary" @click="openEventContextMenuDia = true">点击查看</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="上传文件(支持分片)">
        <el-button size="mini" type="primary" @click="openUploadDia = true">点击查看</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="动态拖拽区域">
        <el-button size="mini" type="primary" @click="openDragLayoutDia = true">点击查看</el-button>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="拖拽选择">
        <el-button size="mini" type="primary" @click="openAreaSelectorDia = true">点击查看</el-button>
      </el-form-item>
      <el-divider></el-divider>
    </el-form>

    <ContextMenuDia :open.sync="openContextMenuDia"></ContextMenuDia>
    <EventContextMenuDia :open.sync="openEventContextMenuDia"></EventContextMenuDia>
    <EventContextMenu></EventContextMenu>
    <UploadDia :open.sync="openUploadDia"></UploadDia>
    <DragLayoutDia :open.sync="openDragLayoutDia"></DragLayoutDia>
    <AreaSelectorDia :open.sync="openAreaSelectorDia"></AreaSelectorDia>
  </div>
</template>

<script>
import TreeSelect from './modules/TreeSelect'
import StrGen from './modules/StrGen'
import FormatTime from './modules/FormatTime'
import OpenDir from './modules/OpenDir'
import ContextMenuDia from './modules/ContextMenuDia'
import EventContextMenuDia from './modules/EventContextMenuDia'
import EventContextMenu from './components/EventContextMenu.vue'
import UploadDia from './modules/uploadDia'
import DragLayoutDia from './modules/DragLayoutDia'
import AreaSelectorDia from './modules/AreaSelectorDia'
import { tree2list, list2tree } from './utils'

export default {
  name: 'App',
  components: {
    TreeSelect,
    StrGen,
    FormatTime,
    OpenDir,
    ContextMenuDia,
    EventContextMenuDia,
    EventContextMenu,
    UploadDia,
    DragLayoutDia,
    AreaSelectorDia
  },
  data() {
    return {

      list: [
        {
          id: 1,
          pid: -1,
          label: '节点1'
        },
        {
          id: 2,
          pid: 1,
          label: '节点2'
        },
        {
          id: 3,
          pid: 1,
          label: '节点3'
        },
        {
          id: 4,
          pid: -1,
          label: '节点4'
        },
        {
          id: 5,
          pid: 4,
          label: '节点5'
        },
        {
          id: 6,
          pid: 5,
          label: '节点6'
        }
      ],
      treeRes: null,

      tree:[
          {
              "id": 1,
              "pid": -1,
              "label": "节点1",
              "children": [
                  {
                      "id": 2,
                      "pid": 1,
                      "label": "节点2"
                  },
                  {
                      "id": 3,
                      "pid": 1,
                      "label": "节点3"
                  }
              ]
          },
          {
              "id": 4,
              "pid": -1,
              "label": "节点4",
              "children": [
                  {
                      "id": 5,
                      "pid": 4,
                      "label": "节点5",
                      "children": [
                          {
                              "id": 6,
                              "pid": 5,
                              "label": "节点6"
                          }
                      ]
                  }
              ]
          }
      ],
      listRes: null,

      openContextMenuDia: false,
      openEventContextMenuDia: false,
      openUploadDia: false,
      openDragLayoutDia: false,
      openAreaSelectorDia: false
      
    }
  },
  methods: {
    transList() {
      if (!this.treeRes) {
        this.$message.info("请移步至控制台查看结果")
      }
      console.log("原始列表", this.list)
      this.treeRes = list2tree(this.list)
      console.log("转换后", this.treeRes)
    },

    transTree() {
      if (!this.listRes) {
        this.$message.info("请移步至控制台查看结果")
      }
      console.log("原始树", this.tree)
      this.listRes = tree2list(this.tree)
      console.log("转换后", this.listRes)
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 500px;
  margin: 60px auto;
}
.star {
 width: 20px;
 height: 20px;
 border-radius: 30px;
 background-color: pink;
}
</style>
